import { useGetAllDisciplines } from "@/entities/discipline/model/useGetAllDisciplines"
import { Canvas3d } from "@/shared/3d/Canvas3d"
import { Environment, Gltf, Plane } from "@react-three/drei"
import ChooseDisciplineCamera from "./DisciplinesCamera"
import NavigationBlock from "./NavigationBlock"
import { useEffect, useState } from "react"
import Discipline from "@/entities/discipline/ui/Discipline"
import { Vector3 } from "three"
import { UiHeader } from "@/shared/Uikit/UiHeader"
import LogoutButton from "@/features/logout/ui/LogoutButton"


export default function ChooseDiscipline() {
    const { disciplines } = useGetAllDisciplines()
    const [index, setIndex] = useState(0)
    const [target, setTarget] = useState<[number, number, number]>([20, 0, -100])
    useEffect(() => {
        setTarget([20, 0, index * 100 - 100])
    }, [index])

    return (
        <>
            <div className='h-screen max-h-screen'>
                {!!disciplines?.length &&
                    <NavigationBlock
                        text={disciplines[index].tittle}
                        onLeftClick={() => {
                            if (index != 0) {
                                setIndex(index - 1)
                            }
                            else {
                                setIndex(disciplines.length - 1)
                            }

                        }}
                        onRightClick={() => {
                            if (index != disciplines.length - 1) {
                                setIndex(index + 1)
                            }
                            else {
                                setIndex(0)
                            }

                        }}
                    />
                }
                <Canvas3d camera={{ far: 400 }} className='bg-sky-200 h-full w-full' >
                    <ChooseDisciplineCamera
                        target={target}
                        minPan={new Vector3(-200, -1000, -200)}
                        maxPan={new Vector3(200, 1000, 200)}
                    />
                    <fog attach={'fog'} args={['lightblue', 200, 300]} />
                    <Environment files='/assets/hdri.exr' />
                    <Gltf src='assets/ground.glb' castShadow receiveShadow />
                    {disciplines?.map((e, i) => {
                        return (
                            <Discipline
                                castShadow
                                receiveShadow
                                disciplineId={e.id}
                                tittle={e.tittle}
                                key={e.id}
                                position={[50, 0, i * 100 - 100]} />
                        )
                    }
                    )}
                </Canvas3d>
            </div>
        </>
    )
}